<template>
  <ve-modal title="选择车辆" v-model="visible" cancelText="关闭" @close="visible = false" @confirm="onConfirm">
    <view class="license-tips"> 修改车牌对于订单信息、数据统计、财务统计、库存及OTA反占、车辆里程预警等有影响，请谨慎操作! </view>
    <view class="change-content">
      <view class="change-tip">请选择修改的车辆</view>
      <view class="change-item" v-for="(item, index) in orderCarInfoList" :key="index" @click="changeItem(item)">
        <view>{{ item.label }}</view>
        <image :src="form.newOrderCarId == item.value ? changedIcon : changeIcon" mode="widthFix" />
      </view>
    </view>
  </ve-modal>
  <ve-toast ref="toast" />
</template>
<script setup>
  import { ref } from 'vue'
  import changeIcon from '@/static/icons/icon_change.png'
  import changedIcon from '@/static/icons/icon_changed.png'
  const emit = defineEmits(['ok'])
  const props = defineProps({
    orderCarInfoList: {
      type: Array,
      default: () => [],
    },
  })
  const visible = ref(false)
  const form = ref({})

  const open = (record) => {
    visible.value = true
    form.value = record
    form.value.newOrderCarId = ''
  }
  const changeItem = (val) => {
    form.value.newOrderCarId = val.value
  }
  // 点击确认
  const toast = ref()
  const onConfirm = () => {
    if (!form.value.newOrderCarId) {
      uni.showToast({
        title: '请选择修改的车辆',
        icon: 'none',
      })
      return false
    }
    visible.value = false
    emit('ok', form.value)
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  .license-tips {
    color: #f53f3f;
    font-size: 32rpx;
    line-height: 48rpx;
    text-align: center;
  }
  .change-content {
    .change-tip {
      color: #191c27;
      font-weight: 600;
      font-size: 30rpx;
      margin-top: 32rpx;
    }
    .change-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 76rpx;
      image {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
</style>
